<template>
  <!-- 缺陷分布分析表 -->
  <div class="drackba_content">
    <!-- 搜索框 -->
    <div class="dranckba_seche">
      <el-form class="table_serch">
        <div class="tabale_serch_top">
          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">机种</div>
            <Ariplandown
              :modlulist="modlulist"
              :formInline="formInline"
            ></Ariplandown>
          </div>

          <div class="table_serch_labe" style="margin-left: -13px">
            <div class="table_serch_labe_title">线体</div>
            <Linedrpdown
              style="margin-left: 3px"
              @change="onchange"
              :linedroplist="linedroplist"
              :formInline="formInline"
            ></Linedrpdown>
          </div>

          <div class="table_serch_labe" style="margin-left: -15px">
            <div class="table_serch_labe_title">设备</div>
            <el-select
              v-model="formInline.site"
              clearable
              size="mini"
              style="margin-left: 5px; margin-top: 8px; width: 140px"
              placeholder="请选择内容"
            >
              <el-option
                v-for="(item, index) in this.siteItems"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>

          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">起始日期</div>
            <el-form-item label="">
              <StartTime :formInline="formInline"></StartTime>
              <!-- <el-date-picker
                size="mini"
                v-model="formInline.starttime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width: 140px; margin-left: 10px"
              >
              </el-date-picker> -->
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">结束日期</div>
            <el-form-item label="">
              <Endtime :formInline="formInline"></Endtime>
              <!-- <el-date-picker
                size="mini"
                v-model="formInline.endtime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                style="width: 140px; margin-left: 5px"
              >
              </el-date-picker> -->
            </el-form-item>
          </div>
        </div>
        <div class="tabale_serch_bom">
          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">班次</div>
            <el-select
              v-model="formInline.class"
              clearable
              size="mini"
              style="margin-left: 5px; margin-top: 8px; width: 140px"
              placeholder="请选择内容"
            >
              <el-option label="白班" value="白班"></el-option>
              <el-option label="夜班" value="夜班"></el-option>
            </el-select>
          </div>

          <div class="table_serch_labe and_table"  >
            <div class="table_serch_labe_title">玻璃</div>
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="
                width: 140px;
                height: 30px;
                margin-left: 9px;
                margin-top: 5px;
              "
              v-model="formInline.glassid"
              @input="(e) => (formInline.glassid = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </div>

          <div class="table_serch_labe " id="defend" >
            <div class="table_serch_labe_title" style="margin-left: 5px">
              缺陷
            </div>
            <el-form-item label="">
                <Defectoptions
                  :Defectlist="Defectlist"
                  :formInline="formInline"
                  ></Defectoptions>
            </el-form-item>
          </div>

            <div class="btn_dow">
                    <!-- 文件上传 style="margin-left: 51.8%" -->
                  <div class="uplod_btn">
                    <el-upload
                      class="upload-demo"
                      ref="upload"
                      :limit="limitNum"
                      accept=".xlsx"
                      action="#"
                      :data="this.formInline"
                      multiple
                      :before-upload="beforeUpload"
                      :http-request="uploadFile"
                      :on-success="handleImageSuccess"
                      :on-preview="handlePreview"
                      :on-exceed="handleExceed"
                      :on-remove="handleRemove"
                      :on-change="handleChange"
                      :file-list="formInline.fileList"
                      :auto-upload="false"
                    >
                      <el-button
                        size="small"
                        style="height: 30px; margin-top: 5px"
                        class="el-upload__tip"
                        type="primary"
                        >上传产品二维码</el-button
                      >
                    </el-upload>
                  </div>
           
                    <div class="table_serch_dow">
                      <Dowtemplte :DowUrl="DowUrl"></Dowtemplte>
                  </div>
            </div>

          <div class="table_serch_labe" style="margin-left: 0%">
            <el-button
              type="primary"
              size="mini"
              style="height: 30px; margin-top: 5px"
              @click="defectanalysis"
              >查询</el-button
            >
          </div>
        </div>
      </el-form>
    </div>

    <!--中部盒子-->
    <div class="dracka_midland_box">
      <div class="dracka_midnd_left">
        <!-- 柱状图  -->
        <div id="my_qersy"></div>
        <!-- 定位展示图  -->
        <div class="dranckba_title">
          <p class="dranckba_title_p">玻璃缺陷分布分析图</p>
          <!-- 玻璃缺陷分布图 -->
          <div class="dranckba_img">
            <div class="dranckba_id_left">
              <div class="dranck_left_a">
                <table border="1" style="width: 100%">
                  <tr v-for="(item, index) in pos" :key="index">
                    <td
                      v-for="(item, i) in item"
                      :key="i"
                      style="width: 30px; text-align: center; font-size: 12px"
                      v-text="item"
                      v-html="showDate(item)"
                    ></td>
                  </tr>
                </table>
              </div>

              <div class="dranck_left_two">
                <table border="1" style="width: 100%">
                  <tr v-for="(item, index) in postwo" :key="index">
                    <td
                      style="width: 30px; text-align: center; font-size: 12px"
                      v-for="(item, i) in item"
                      :key="i"
                      v-text="item"
                      v-html="showDate(item)"
                    >
                      <!-- {{ item }} -->
                    </td>
                  </tr>
                </table>
              </div>
            </div>

            <!--数据详细 展示对比-->
            <div class="dranckba_item">
              <div>
                <div
                  class="dranckba_item_two"
                  style="border: 1px solid #000; background: #f8f8ff"
                ></div>
                <div style="margin-left: 6px">0-10</div>
              </div>
              <div>
                <div
                  class="dranckba_item_two"
                  style="border: 1px solid #e42020; background: #e42020"
                ></div>
                <div>11-30</div>
              </div>
              <div>
                <div
                  class="dranckba_item_two"
                  style="border: 1px solid #bf0f0f; background: #bf0f0f"
                ></div>
                <div>31-50</div>
              </div>
              <div>
                <div
                  class="dranckba_item_two"
                  style="
                    margin-left: 4px;
                    border: 1px solid #930a0a;
                    background: #930a0a;
                  "
                ></div>
                <div style="margin-left: 6px">51-100</div>
              </div>
              <div>
                <div
                  class="dranckba_item_ser"
                  style="
                    margin-left: 8px;
                    border: 1px solid #5d0404;
                    background: #5d0404;
                  "
                ></div>
                <div style="margin-left: 12px">100以上</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dracka_midnd_right" v-show="isshow">
        <!--照片 -->
        <div class="dranckba_right">
          <div class="dranckba_right_title">产品缺陷分布图</div>
          <div v-for="(item, index) in img" :key="index">
            <img :src="item.ImagePath" alt="" class="dranckba_right_img" />
          </div>
        </div>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="dranckba_table">
      <div style="padding: 10px; font-size: 12px">缺陷信息统计</div>
      <el-table
        :data="tablelist.slice(1)"
        border
        width="100%"
        :row-style="{ height: '10px' }"
        style="height: 10; font-size: 9px"
        size="mini"
        :cell-class-name="rowClass"
        :header-cell-style="headClass"
      >
        <!-- showDateNG   show-overflow-tooltip-->
        <el-table-column
          :fit="filt"
          v-for="(item, index) in this.listdata[0]"
          :key="index"
          :label="item"
          :prop="item"
        ></el-table-column>
      </el-table>

      <div class="tlop">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="table_loding" v-show="isshow">
      <div class="table_title">加载中... ....</div>
      <div class="table_timer">网络请求延时: {{ timer }}秒</div>
    </div>
    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
  </div>
</template>

<script>

import Endtime from '../../../components/endTime/Endtime'
import StartTime from '../../../components/StarTime/StartTime'
import Dowtemplte from '../../../components/Dowtemplate/Dowtemplate'
import Linedrpdown from "../../../components/Linedropdown/Linedropdown";
import Ariplandown from "../../../components/Airplandown/Airplandown";
import Defectoptions from '../../../components/Defectoptions/Defectoptions'
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
export default {
  components: {
    Popup,
    Ariplandown,
    Linedrpdown,
    Defectoptions,
    Dowtemplte,
      Endtime,
    StartTime
  },
  data() {
    return {
       DowUrl:"/file/local?filename=templates/1003.xlsx",
      filt: true,
      Popup_show: false,
      fileList: [],
      formData: "",
      theme: "上传表格",
      timer: 0,
      isshow: false,
      valtimer: "",
      search2: ["01", "02", "03", "04", "05"],
      valitems: [
        "06",
        "07",
        "08",
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "09",
        "10",
      ],
      valitems2: [
        // "8",
        // "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
      ],
      valitems3: [
        "31",
        "32",
        "33",
        "34",
        "35",
        "36",
        "37",
        "38",
        "39",
        "40",
        "41",
        "42",
        "43",
        "44",
        "45",
        "46",
        "47",
        "48",
        "49",
        "50",
      ],
      valitems4: [
        "51",
        "52",
        "53",
        "54",
        "55",
        "56",
        "57",
        "58",
        "59",
        "60",
        "61",
        "62",
        "63",
        "64",
        "65",
        "66",
        "67",
        "68",
        "69",
        "70",
        "71",
        "72",
        "73",
        "74",
        "75",
        "76",
        "77",
        "78",
        "79",
        "80",
        "81",
        "82",
        "83",
        "84",
        "85",
        "86",
        "87",
        "88",
        "89",
        "90",
        "91",
        "92",
        "93",
        "94",
        "95",
        "96",
        "97",
        "98",
        "99",
        "100",
      ],
      valitems5: [
        "100",
        "101",
        "102",
        "103",
        "104",
        "105",
        "106",
        "107",
        "108",
        "109",
        "110",
        "111",
        "112",
        "113",
        "114",
        "115",
        "116",
        "117",
        "118",
        "119",
        "120",
        "121",
        "122",
        "123",
        "124",
        "125",
        "126",
        "127",
        "128",
        "129",
        "130",
        "131",
        "132",
        "133",
        "134",
        "135",
        "136",
        "137",
        "138",
        "139",
        "140",
        "141",
        "142",
        "143",
        "144",
        "145",
        "146",
        "147",
        "148",
        "149",
        "150",
      ],
      valitems6: [
        "151",
        "152",
        "153",
        "154",
        "155",
        "156",
        "157",
        "158",
        "159",
        "160",
        "161",
        "162",
        "163",
        "164",
        "165",
        "166",
        "167",
        "168",
        "169",
        "170",
        "171",
        "172",
        "173",
        "174",
        "175",
        "176",
        "177",
        "178",
        "179",
        "180",
        "181",
        "182",
        "183",
        "184",
        "185",
        "186",
        "187",
        "188",
        "189",
        "190",
        "191",
        "192",
        "193",
        "194",
        "195",
        "196",
        "197",
        "198",
        "199",
        "200",
      ],
      valitems7:[],
      valname: ["AA", "AB", "AC", "AD", "AE", "AF", "AG"],
      valNG: "NG",
      total: 0,
      currentPage: 1,
      pageSize: 50,
      list: [],
      pos: [],
      bar: [],
      postwo: [],
      tableData: [],
      listitems: [],
      isConfirm: true,
      limitNum: 1,
      formInline: {
        recipe: "",
        order: "",
        line: "",
        site: "",
        starttime: "",
        endtime: "",
        errorcode: "",
        class: "",
        type: [],
        personid: "",
        glassid: "",
        filesUrl: "",
        fileList: [],
        filename: "",
      },
      restaurants: [],
      img: [],
      items: [],
      caChe_key: "",
      tablelist: [],
      listdata: [],
      modlulist: [],
      linedroplist: [],
      sitedrwn: [],
      Nunerlist: [],
      siteItems: [],
      Numlist:[],
      Numlist2:[],
      Defectlist:[]
    };
  },
  created() {
    this.getModelnolist();
    // this.timerclick()
  },
  mounted() {},

  computed: {
    tables: function () {
      var val = this.search;
      var val2 = this.ken;
      var val3 = this.ken3;
      if (val) {
        return this.pos.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(val) > -1;
          });
        });
      } else if (val2) {
        return this.pos.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(val) > -1;
          });
        });
      } else if (val3) {
        return this.pos.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(val) > -1;
          });
        });
      }
      return this.pos;
    },

    tablelista: function () {
      var in1 = this.in1;
      var in2 = this.in2;
      var in3 = this.in3;
      if (in1) {
        return this.postwo.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(in1) > -1;
          });
        });
      } else if (in2) {
        return this.postwo.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(in2) > -1;
          });
        });
      } else if (in3) {
        return this.postwo.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(in3) > -1;
          });
        });
      }
      return this.posdata;
    },

    tableNG: function () {
      var val = this.valNG;
      if (val) {
        return this.tablelist.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(val) > -1;
          });
        });
      }
      return this.list;
    },
  },

  methods: {
  
    onchange() {
      this.siteItems = [];
      this.sitedrwn.forEach((ele) => {
        if (ele.ID.includes(this.formInline.line)) {
          this.siteItems.push(ele.ID);
        }
      });
    },
    getModelnolist() {
      this.ajax(`func/1023/selProductList`).then((res) => {
        if (res.status == 200) {
          this.modlulist = res.data.product;
          this.linedroplist = res.data.line;
          this.sitedrwn = res.data.eqp;
        }
      });
      this.ajax(`func/1023/selDef`).then((res)=>{
           if(res.status == 200){
                for(var k = 0; k < res.data.length; k++){
                    if(this.Defectlist.indexOf(res.data[k].DFT_TYPE) == -1){
                        this.Defectlist.push(res.data[k].DFT_TYPE)
                    }
                }
           }
        })
    },

    // 表头样式设置
    headClass() {
      return "text-align: center;background:#696969;color:#fff";
    },

    // 表格样式设置{ row, column, rowIndex, columnIndex }
    rowClass({ column, columnIndex }) {
      if (columnIndex === 0) {
        return (column.minWidth = 138);
      } else if (columnIndex === 2) {
        return (column.minWidth = 135);
      } else {
        return (column.minWidth = 50);
      }
      // return 'text-align: center;'
    },

    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUpload(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },

    // 文件状态改变
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
      this.formInline.filename = file.name;
      this.uploadfiles();
    },
    handleImageSuccess(res, file, fileList) {
      console.log(file);
      console.log(res);
      console.log(fileList);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.formInline.filename = "";
      // this.formInline.fileList.shift();
      this.fileList.shift();
    },

    handlePreview(file) {
      console.log(file);
    },

    uploadFile(file) {
      this.formData.append("file", file.file);
    },

    // 文件超出个数限制
    handleExceed(files, fileList) {
      // console.log(filea)
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },

    //上传文件接口
    uploadfiles() {
      let files = new FormData();
      files.append("theme", this.theme);
      for (let i = 0; i < this.fileList.length; i++) {
        files.append("files", this.fileList[i].raw);
      }
      this.ajax.post("upload", files, {}).then((res) => {
        // console.log(res);
        if (res.status == 200) {
          this.$message({
            message: "文件上传成功",
            type: "success",
          });
        }
      });
    },

    //数据请求
    defectanalysis() {
      if(this.formInline.recipe){
            if (this.formInline.recipe == "") {
              this.$message({
                showClose: true,
                message: "机种不能为空",
                type: "warning",
              });
            } else if (this.formInline.starttime == "") {
              this.$message({
                showClose: true,
                message: "起始日期不能为空",
                type: "warning",
              });
            } else if (this.formInline.endtime == "") {
              this.$message({
                showClose: true,
                message: "结束日期不能为空",
                type: "warning",
              });
            } else if (this.formInline.endtime < this.formInline.starttime) {
              this.$message({
                showClose: true,
                message: "结束日期不能小于起始日期",
                type: "warning",
              });
            } else {
                this.GetcenontList()
            }
      }else{
         
         if (this.formInline.filename == "") {
          this.$message({
            showClose: true,
            message: "请上传ID",
            type: "warning",
          });
        } else if (this.formInline.starttime == "") {
          this.$message({
            showClose: true,
            message: "起始日期不能为空",
            type: "warning",
          });
        } else if (this.formInline.endtime == "") {
          this.$message({
            showClose: true,
            message: "结束日期不能为空",
            type: "warning",
          });
        } else if (this.formInline.endtime < this.formInline.starttime) {
          this.$message({
            showClose: true,
            message: "结束日期不能小于起始日期",
            type: "warning",
          });
        } else {
            this.GetcenontList();
        }
      }
    },
 
     //请求数据方法
     GetcenontList(){
           const CancelToken = axios.CancelToken;
        this.ajax
          .get(
            `prod/1003?starttime=${this.formInline.starttime}&endtime=${this.formInline.endtime}&recipe=${this.formInline.recipe}&line=${this.formInline.line}&site=${this.formInline.site}&class=${this.formInline.class}&order=${this.formInline.order}&personid=${this.formInline.personid}&filesUrl=${this.formInline.filesUrl}&fileList=${this.formInline.fileList}&filename=${this.formInline.filename}&glassid=${this.formInline.glassid}&errorcode=${this.formInline.errorcode}`,
            {
              cancelToken: new CancelToken((c) => {
                this.cancel = c;
              }),
            }
          )
          .then((res) => {
            var reqult = res.data;
            console.log("-----------------", reqult);
            if (reqult) {
              this.list = [];
              this.img = [];
              this.total = reqult.tableInfo.row_num;
              this.pos = reqult.pos1;
              this.postwo = reqult.pos2;
              this.bar = reqult.bar;
              this.tableData = reqult.tableInfo.heads;
              this.caChe_key = reqult.tableInfo.cache_key;
              if (this.bar.length) {
                this.dranbacklass();
                this.drawbackpage();
              } else {
                this.$message({
                  showClose: true,
                  message: "数据返回为空，请重新重新请求",
                  type: "error",
                });
                setTimeout(() => {
                  this.$router.go(0);
                }, 300);
              }
              if (this.pos.length) {
                this.pos.forEach((ele) => {
                  // console.log(ele)
                  ele.forEach((item)=>{
                    if(item>100){
                       this.Numlist.push(item)
                    }
                  })
                  ///获取玻璃看板key值
                  this.valname.push(ele[0]);
                });
                this.postwo.forEach((ele)=>{
                  ele.forEach((item)=>{
                    if(item>100){
                       this.Numlist2.push(item)
                    }
                  })
                })
              }
            }
          });
     },
    //分页数据列表解析方法
    Tabudataparsing() {
      this.tablelist = [];
      // console.log("------------------------", this.listdata);
      var titlelist = this.listdata[0];
      var a = titlelist[0];
      var b = titlelist[1];
      var c = titlelist[2];
      var d = titlelist[3];
      var e = titlelist[4];
      var f = titlelist[5];
      var g = titlelist[6];
      var h = titlelist[7];
      var io = titlelist[8];
      var j = titlelist[9];
      var k = titlelist[10];
      var L = titlelist[11];
      var m = titlelist[12];
      var n = titlelist[13];
      var o = titlelist[14];
      var p = titlelist[15];
      var q = titlelist[16];
      var r = titlelist[17];
      var s = titlelist[18];
      var t = titlelist[19];
      var u = titlelist[20];
      var v = titlelist[21];
      var w = titlelist[22];
      var x = titlelist[23];
      var y = titlelist[24];
      var z = titlelist[25];
      if (this.listdata[0].length == 2) {
        for (let i = 1; i < this.listdata.length; i++) {
          var objon = {};
          objon[a] = this.listdata[i][0];
          objon[b] = this.listdata[i][1];
          this.tablelist.push(objon);
        }
      } else if (this.listdata[0].length == 3) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj0 = {};
          obj0[a] = this.listdata[i][0];
          obj0[b] = this.listdata[i][1];
          obj0[c] = this.listdata[i][2];
          // obj[d] = this.bartable[i][3];
          this.tablelist.push(obj0);
        }
      } else if (this.listdata[0].length == 4) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj = {};
          obj[a] = this.listdata[i][0];
          obj[b] = this.listdata[i][1];
          obj[c] = this.listdata[i][2];
          obj[d] = this.listdata[i][3];
          this.tablelist.push(obj);
        }
      } else if (this.listdata[0].length == 5) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj1 = {};
          obj1[a] = this.listdata[i][0];
          obj1[b] = this.listdata[i][1];
          obj1[c] = this.listdata[i][2];
          obj1[d] = this.listdata[i][3];
          obj1[e] = this.listdata[i][4];
          this.tablelist.push(obj1);
        }
      } else if (this.listdata[0].length == 6) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj2 = {};
          obj2[a] = this.listdata[i][0];
          obj2[b] = this.listdata[i][1];
          obj2[c] = this.listdata[i][2];
          obj2[d] = this.listdata[i][3];
          obj2[e] = this.listdata[i][4];
          obj2[f] = this.listdata[i][5];
          this.tablelist.push(obj2);
        }
      } else if (this.listdata[0].length == 7) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj3 = {};
          obj3[a] = this.listdata[i][0];
          obj3[b] = this.listdata[i][1];
          obj3[c] = this.listdata[i][2];
          obj3[d] = this.listdata[i][3];
          obj3[e] = this.listdata[i][4];
          obj3[f] = this.listdata[i][5];
          obj3[g] = this.listdata[i][6];
          this.tablelist.push(obj3);
        }
      } else if (this.listdata[0].length == 8) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj4 = {};
          obj4[a] = this.listdata[i][0];
          obj4[b] = this.listdata[i][1];
          obj4[c] = this.listdata[i][2];
          obj4[d] = this.listdata[i][3];
          obj4[e] = this.listdata[i][4];
          obj4[f] = this.listdata[i][5];
          obj4[g] = this.listdata[i][6];
          obj4[h] = this.listdata[i][7];
          this.tablelist.push(obj4);
        }
      } else if (this.listdata[0].length == 9) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj5 = {};
          obj5[a] = this.listdata[i][0];
          obj5[b] = this.listdata[i][1];
          obj5[c] = this.listdata[i][2];
          obj5[d] = this.listdata[i][3];
          obj5[e] = this.listdata[i][4];
          obj5[f] = this.listdata[i][5];
          obj5[g] = this.listdata[i][6];
          obj5[h] = this.listdata[i][7];
          obj5[io] = this.listdata[i][8];
          this.tablelist.push(obj5);
        }
      } else if (this.listdata[0].length == 10) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj6 = {};
          obj6[a] = this.listdata[i][0];
          obj6[b] = this.listdata[i][1];
          obj6[c] = this.listdata[i][2];
          obj6[d] = this.listdata[i][3];
          obj6[e] = this.listdata[i][4];
          obj6[f] = this.listdata[i][5];
          obj6[g] = this.listdata[i][6];
          obj6[h] = this.listdata[i][7];
          obj6[io] = this.listdata[i][8];
          obj6[j] = this.listdata[i][9];
          this.tablelist.push(obj6);
        }
      } else if (this.listdata[0].length == 11) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj7 = {};
          obj7[a] = this.listdata[i][0];
          obj7[b] = this.listdata[i][1];
          obj7[c] = this.listdata[i][2];
          obj7[d] = this.listdata[i][3];
          obj7[e] = this.listdata[i][4];
          obj7[f] = this.listdata[i][5];
          obj7[g] = this.listdata[i][6];
          obj7[h] = this.listdata[i][7];
          obj7[io] = this.listdata[i][8];
          obj7[j] = this.listdata[i][9];
          obj7[k] = this.listdata[i][10];
          this.tablelist.push(obj7);
        }
      } else if (this.listdata[0].length == 12) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj8 = {};
          obj8[a] = this.listdata[i][0];
          obj8[b] = this.listdata[i][1];
          obj8[c] = this.listdata[i][2];
          obj8[d] = this.listdata[i][3];
          obj8[e] = this.listdata[i][4];
          obj8[f] = this.listdata[i][5];
          obj8[g] = this.listdata[i][6];
          obj8[h] = this.listdata[i][7];
          obj8[io] = this.listdata[i][8];
          obj8[j] = this.listdata[i][9];
          obj8[k] = this.listdata[i][10];
          obj8[L] = this.listdata[i][11];
          this.tablelist.push(obj8);
        }
      } else if (this.listdata[0].length == 13) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj9 = {};
          obj9[a] = this.listdata[i][0];
          obj9[b] = this.listdata[i][1];
          obj9[c] = this.listdata[i][2];
          obj9[d] = this.listdata[i][3];
          obj9[e] = this.listdata[i][4];
          obj9[f] = this.listdata[i][5];
          obj9[g] = this.listdata[i][6];
          obj9[h] = this.listdata[i][7];
          obj9[io] = this.listdata[i][8];
          obj9[j] = this.listdata[i][9];
          obj9[k] = this.listdata[i][10];
          obj9[L] = this.listdata[i][11];
          obj9[m] = this.listdata[i][12];
          this.tablelist.push(obj9);
        }
      } else if (this.listdata[0].length == 14) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj10 = {};
          obj10[a] = this.listdata[i][0];
          obj10[b] = this.listdata[i][1];
          obj10[c] = this.listdata[i][2];
          obj10[d] = this.listdata[i][3];
          obj10[e] = this.listdata[i][4];
          obj10[f] = this.listdata[i][5];
          obj10[g] = this.listdata[i][6];
          obj10[h] = this.listdata[i][7];
          obj10[io] = this.listdata[i][8];
          obj10[j] = this.listdata[i][9];
          obj10[k] = this.listdata[i][10];
          obj10[L] = this.listdata[i][11];
          obj10[m] = this.listdata[i][12];
          obj10[n] = this.listdata[i][13];
          this.tablelist.push(obj10);
        }
      } else if (this.listdata[0].length == 15) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj11 = {};
          obj11[a] = this.listdata[i][0];
          obj11[b] = this.listdata[i][1];
          obj11[c] = this.listdata[i][2];
          obj11[d] = this.listdata[i][3];
          obj11[e] = this.listdata[i][4];
          obj11[f] = this.listdata[i][5];
          obj11[g] = this.listdata[i][6];
          obj11[h] = this.listdata[i][7];
          obj11[io] = this.listdata[i][8];
          obj11[j] = this.listdata[i][9];
          obj11[k] = this.listdata[i][10];
          obj11[L] = this.listdata[i][11];
          obj11[m] = this.listdata[i][12];
          obj11[n] = this.listdata[i][13];
          obj11[o] = this.listdata[i][14];
          this.tablelist.push(obj11);
        }
      } else if (this.listdata[0].length == 16) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj12 = {};
          obj12[a] = this.listdata[i][0];
          obj12[b] = this.listdata[i][1];
          obj12[c] = this.listdata[i][2];
          obj12[d] = this.listdata[i][3];
          obj12[e] = this.listdata[i][4];
          obj12[f] = this.listdata[i][5];
          obj12[g] = this.listdata[i][6];
          obj12[h] = this.listdata[i][7];
          obj12[io] = this.listdata[i][8];
          obj12[j] = this.listdata[i][9];
          obj12[k] = this.listdata[i][10];
          obj12[L] = this.listdata[i][11];
          obj12[m] = this.listdata[i][12];
          obj12[n] = this.listdata[i][13];
          obj12[o] = this.listdata[i][14];
          obj12[p] = this.listdata[i][15];
          this.tablelist.push(obj12);
        }
      } else if (this.listdata[0].length == 17) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj13 = {};
          obj13[a] = this.listdata[i][0];
          obj13[b] = this.listdata[i][1];
          obj13[c] = this.listdata[i][2];
          obj13[d] = this.listdata[i][3];
          obj13[e] = this.listdata[i][4];
          obj13[f] = this.listdata[i][5];
          obj13[g] = this.listdata[i][6];
          obj13[h] = this.listdata[i][7];
          obj13[io] = this.listdata[i][8];
          obj13[j] = this.listdata[i][9];
          obj13[k] = this.listdata[i][10];
          obj13[L] = this.listdata[i][11];
          obj13[m] = this.listdata[i][12];
          obj13[n] = this.listdata[i][13];
          obj13[o] = this.listdata[i][14];
          obj13[p] = this.listdata[i][15];
          obj13[q] = this.listdata[i][16];
          this.tablelist.push(obj13);
        }
      } else if (this.listdata[0].length == 18) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj14 = {};
          obj14[a] = this.listdata[i][0];
          obj14[b] = this.listdata[i][1];
          obj14[c] = this.listdata[i][2];
          obj14[d] = this.listdata[i][3];
          obj14[e] = this.listdata[i][4];
          obj14[f] = this.listdata[i][5];
          obj14[g] = this.listdata[i][6];
          obj14[h] = this.listdata[i][7];
          obj14[io] = this.listdata[i][8];
          obj14[j] = this.listdata[i][9];
          obj14[k] = this.listdata[i][10];
          obj14[L] = this.listdata[i][11];
          obj14[m] = this.listdata[i][12];
          obj14[n] = this.listdata[i][13];
          obj14[o] = this.listdata[i][14];
          obj14[p] = this.listdata[i][15];
          obj14[q] = this.listdata[i][16];
          obj14[r] = this.listdata[i][17];
          this.tablelist.push(obj14);
        }
      } else if (this.listdata[0].length == 19) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj15 = {};
          obj15[a] = this.listdata[i][0];
          obj15[b] = this.listdata[i][1];
          obj15[c] = this.listdata[i][2];
          obj15[d] = this.listdata[i][3];
          obj15[e] = this.listdata[i][4];
          obj15[f] = this.listdata[i][5];
          obj15[g] = this.listdata[i][6];
          obj15[h] = this.listdata[i][7];
          obj15[io] = this.listdata[i][8];
          obj15[j] = this.listdata[i][9];
          obj15[k] = this.listdata[i][10];
          obj15[L] = this.listdata[i][11];
          obj15[m] = this.listdata[i][12];
          obj15[n] = this.listdata[i][13];
          obj15[o] = this.listdata[i][14];
          obj15[p] = this.listdata[i][15];
          obj15[q] = this.listdata[i][16];
          obj15[r] = this.listdata[i][17];
          obj15[s] = this.listdata[i][18];
          this.tablelist.push(obj15);
        }
      } else if (this.listdata[0].length == 20) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj16 = {};
          obj16[a] = this.listdata[i][0];
          obj16[b] = this.listdata[i][1];
          obj16[c] = this.listdata[i][2];
          obj16[d] = this.listdata[i][3];
          obj16[e] = this.listdata[i][4];
          obj16[f] = this.listdata[i][5];
          obj16[g] = this.listdata[i][6];
          obj16[h] = this.listdata[i][7];
          obj16[io] = this.listdata[i][8];
          obj16[j] = this.listdata[i][9];
          obj16[k] = this.listdata[i][10];
          obj16[L] = this.listdata[i][11];
          obj16[m] = this.listdata[i][12];
          obj16[n] = this.listdata[i][13];
          obj16[o] = this.listdata[i][14];
          obj16[p] = this.listdata[i][15];
          obj16[q] = this.listdata[i][16];
          obj16[r] = this.listdata[i][17];
          obj16[s] = this.listdata[i][18];
          obj16[t] = this.listdata[i][19];
          this.tablelist.push(obj16);
        }
      } else if (this.listdata[0].length == 21) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj17 = {};
          obj17[a] = this.listdata[i][0];
          obj17[b] = this.listdata[i][1];
          obj17[c] = this.listdata[i][2];
          obj17[d] = this.listdata[i][3];
          obj17[e] = this.listdata[i][4];
          obj17[f] = this.listdata[i][5];
          obj17[g] = this.listdata[i][6];
          obj17[h] = this.listdata[i][7];
          obj17[io] = this.listdata[i][8];
          obj17[j] = this.listdata[i][9];
          obj17[k] = this.listdata[i][10];
          obj17[L] = this.listdata[i][11];
          obj17[m] = this.listdata[i][12];
          obj17[n] = this.listdata[i][13];
          obj17[o] = this.listdata[i][14];
          obj17[p] = this.listdata[i][15];
          obj17[q] = this.listdata[i][16];
          obj17[r] = this.listdata[i][17];
          obj17[s] = this.listdata[i][18];
          obj17[t] = this.listdata[i][19];
          obj17[u] = this.listdata[i][20];
          this.tablelist.push(obj17);
        }
      } else if (this.listdata[0].length == 22) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj18 = {};
          obj18[a] = this.listdata[i][0];
          obj18[b] = this.listdata[i][1];
          obj18[c] = this.listdata[i][2];
          obj18[d] = this.listdata[i][3];
          obj18[e] = this.listdata[i][4];
          obj18[f] = this.listdata[i][5];
          obj18[g] = this.listdata[i][6];
          obj18[h] = this.listdata[i][7];
          obj18[io] = this.listdata[i][8];
          obj18[j] = this.listdata[i][9];
          obj18[k] = this.listdata[i][10];
          obj18[L] = this.listdata[i][11];
          obj18[m] = this.listdata[i][12];
          obj18[n] = this.listdata[i][13];
          obj18[o] = this.listdata[i][14];
          obj18[p] = this.listdata[i][15];
          obj18[q] = this.listdata[i][16];
          obj18[r] = this.listdata[i][17];
          obj18[s] = this.listdata[i][18];
          obj18[t] = this.listdata[i][19];
          obj18[u] = this.listdata[i][20];
          obj18[v] = this.listdata[i][21];
          this.tablelist.push(obj18);
        }
      } else if (this.listdata[0].length == 23) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj19 = {};
          obj19[a] = this.listdata[i][0];
          obj19[b] = this.listdata[i][1];
          obj19[c] = this.listdata[i][2];
          obj19[d] = this.listdata[i][3];
          obj19[e] = this.listdata[i][4];
          obj19[f] = this.listdata[i][5];
          obj19[g] = this.listdata[i][6];
          obj19[h] = this.listdata[i][7];
          obj19[io] = this.listdata[i][8];
          obj19[j] = this.listdata[i][9];
          obj19[k] = this.listdata[i][10];
          obj19[L] = this.listdata[i][11];
          obj19[m] = this.listdata[i][12];
          obj19[n] = this.listdata[i][13];
          obj19[o] = this.listdata[i][14];
          obj19[p] = this.listdata[i][15];
          obj19[q] = this.listdata[i][16];
          obj19[r] = this.listdata[i][17];
          obj19[s] = this.listdata[i][18];
          obj19[t] = this.listdata[i][19];
          obj19[u] = this.listdata[i][20];
          obj19[v] = this.listdata[i][21];
          obj19[w] = this.listdata[i][22];
          this.tablelist.push(obj19);
        }
      } else if (this.listdata[0].length == 24) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj20 = {};
          obj20[a] = this.listdata[i][0];
          obj20[b] = this.listdata[i][1];
          obj20[c] = this.listdata[i][2];
          obj20[d] = this.listdata[i][3];
          obj20[e] = this.listdata[i][4];
          obj20[f] = this.listdata[i][5];
          obj20[g] = this.listdata[i][6];
          obj20[h] = this.listdata[i][7];
          obj20[io] = this.listdata[i][8];
          obj20[j] = this.listdata[i][9];
          obj20[k] = this.listdata[i][10];
          obj20[L] = this.listdata[i][11];
          obj20[m] = this.listdata[i][12];
          obj20[n] = this.listdata[i][13];
          obj20[o] = this.listdata[i][14];
          obj20[p] = this.listdata[i][15];
          obj20[q] = this.listdata[i][16];
          obj20[r] = this.listdata[i][17];
          obj20[s] = this.listdata[i][18];
          obj20[t] = this.listdata[i][19];
          obj20[u] = this.listdata[i][20];
          obj20[v] = this.listdata[i][21];
          obj20[w] = this.listdata[i][22];
          obj20[x] = this.listdata[i][23];
          this.tablelist.push(obj20);
        }
      } else if (this.listdata[0].length == 25) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj21 = {};
          obj21[a] = this.listdata[i][0];
          obj21[b] = this.listdata[i][1];
          obj21[c] = this.listdata[i][2];
          obj21[d] = this.listdata[i][3];
          obj21[e] = this.listdata[i][4];
          obj21[f] = this.listdata[i][5];
          obj21[g] = this.listdata[i][6];
          obj21[h] = this.listdata[i][7];
          obj21[io] = this.listdata[i][8];
          obj21[j] = this.listdata[i][9];
          obj21[k] = this.listdata[i][10];
          obj21[L] = this.listdata[i][11];
          obj21[m] = this.listdata[i][12];
          obj21[n] = this.listdata[i][13];
          obj21[o] = this.listdata[i][14];
          obj21[p] = this.listdata[i][15];
          obj21[q] = this.listdata[i][16];
          obj21[r] = this.listdata[i][17];
          obj21[s] = this.listdata[i][18];
          obj21[t] = this.listdata[i][19];
          obj21[u] = this.listdata[i][20];
          obj21[v] = this.listdata[i][21];
          obj21[w] = this.listdata[i][22];
          obj21[x] = this.listdata[i][23];
          obj21[y] = this.listdata[i][24];
          this.tablelist.push(obj21);
        }
      } else if (this.listdata[0].length == 26) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj22 = {};
          obj22[a] = this.listdata[i][0];
          obj22[b] = this.listdata[i][1];
          obj22[c] = this.listdata[i][2];
          obj22[d] = this.listdata[i][3];
          obj22[e] = this.listdata[i][4];
          obj22[f] = this.listdata[i][5];
          obj22[g] = this.listdata[i][6];
          obj22[h] = this.listdata[i][7];
          obj22[io] = this.listdata[i][8];
          obj22[j] = this.listdata[i][9];
          obj22[k] = this.listdata[i][10];
          obj22[L] = this.listdata[i][11];
          obj22[m] = this.listdata[i][12];
          obj22[n] = this.listdata[i][13];
          obj22[o] = this.listdata[i][14];
          obj22[p] = this.listdata[i][15];
          obj22[q] = this.listdata[i][16];
          obj22[r] = this.listdata[i][17];
          obj22[s] = this.listdata[i][18];
          obj22[t] = this.listdata[i][19];
          obj22[u] = this.listdata[i][20];
          obj22[v] = this.listdata[i][21];
          obj22[w] = this.listdata[i][22];
          obj22[x] = this.listdata[i][23];
          obj22[y] = this.listdata[i][24];
          obj22[z] = this.listdata[i][25];
          this.tablelist.push(obj22);
        }
      }
    },

    //分页数据请求
    drawbackpage() {
      var url = `rtable/rk?page=${this.currentPage}&cpp=${this.pageSize}`;
      var besurl = url.replace("rk", this.caChe_key);
      this.ajax({
        url: besurl,
        method: "GET",
      }).then((res) => {
        res.data.unshift(this.tableData);
        // console.log(res.data);
        this.listdata = res.data;
        // console.log('------------------------',this.listdata)
        this.Tabudataparsing();
      });
    },

    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },

    cancelget() {
      console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },
    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },

    // 筛选变色11
    showDate(val) {
      val = val + "";
      for (let i = 0; i < this.search2.length; i++) {
        if (val == this.search2[i]) {
          if (val.indexOf(this.search2[i]) !== 1 && this.search2[i] !== "") {
            return val.replace(
              this.search2[i],
              '<div style="background:#ffffff;width:100%">' +
                this.search2[i] +
                "</div>"
            );
          } else {
            return val;
          }
        }
      }
      for (let i = 0; i < this.valitems.length; i++) {
        if (val == this.valitems[i]) {
          if (val.indexOf(this.valitems[i]) !== 1 && this.valitems[i] !== "") {
            return val.replace(
              this.valitems[i],
              '<div style="background:#ffffff;width:100%">' +
                this.valitems[i] +
                "</div>"
            );
          } else {
            return val;
          }
        }
      }
      for (let i = 0; i < this.valitems2.length; i++) {
        if (val == this.valitems2[i]) {
          if (
            val.indexOf(this.valitems2[i]) !== 1 &&
            this.valitems2[i] !== ""
          ) {
            return val.replace(
              this.valitems2[i],
              '<div style="background:#e42020;width:100%">' +
                this.valitems2[i] +
                "</div>"
            );
          } else {
            return val;
          }
        }
      }
      for (let i = 0; i < this.valname.length; i++) {
        if (val == this.valname[i]) {
          if (val.indexOf(this.valname[i]) !== 1 && this.valname[i] !== "") {
            return val.replace(
              this.valname[i],
              '<div style="background:#ffffff;width:100%">' +
                this.valname[i] +
                "</div>"
            );
          } else {
            return val;
          }
        }
      }
      for (let i = 0; i < this.valitems3.length; i++) {
        if (val == this.valitems3[i]) {
          if (
            val.indexOf(this.valitems3[i]) !== 1 &&
            this.valitems3[i] !== ""
          ) {
            return val.replace(
              this.valitems3[i],
              '<div style="background:#bf0f0f;width:100%">' +
                this.valitems3[i] +
                "</div>"
            );
          } else {
            return val;
          }
        }
      }
      for (let i = 0; i < this.valitems4.length; i++) {
        if (val == this.valitems4[i]) {
          if (
            val.indexOf(this.valitems4[i]) !== 1 &&
            this.valitems4[i] !== ""
          ) {
            return val.replace(
              this.valitems4[i],
              '<div style="background:#930a0a;width:100%">' +
                this.valitems4[i] +
                "</div>"
            );
          } else {
            return val;
          }
        }
      }
        for (let i = 0; i < this.Numlist.length; i++) {
        if (val == this.Numlist[i]) {
          if (
            val.indexOf(this.Numlist[i]) !== 1 &&
            this.Numlist[i] !== ""
          ) {
            return val.replace(
              this.Numlist[i],
              '<div style="background:#5d0404;width:100%;color:#fff">' +
                this.Numlist[i] +
                "</div>"
            );
          } else {
            return val;
          }
        }
      }
       for (let i = 0; i < this.Numlist2.length; i++) {
        if (val == this.Numlist2[i]) {
          if (
            val.indexOf(this.Numlist2[i]) !== 1 &&
            this.Numlist2[i] !== ""
          ) {
            return val.replace(
              this.Numlist2[i],
              '<div style="background:#5d0404;width:100%;color:#fff">' +
                this.Numlist2[i] +
                "</div>"
            );
          } else {
            return val;
          }
        }
      }
    },

    // 背景变色2this.Numlist
    showlist(data) {
      data = data + "";
      if (data.indexOf(this.in1) !== -1 && this.in1 !== "") {
        return data.replace(
          this.in1,
          '<div style="background:#FF0000;width:100%">' + this.in1 + "</div>"
        );
      } else if (data.indexOf(this.in2) !== -1 && this.in2 !== "") {
        return data.replace(
          this.in2,
          '<div style="background:#B22222;width:100%">' + this.in2 + "</div>"
        );
      } else if (data.indexOf(this.in3) !== -1 && this.in3 !== "") {
        return data.replace(
          this.in3,
          '<div style="background:#DC143C;width:100%">' + this.in3 + "</div>"
        );
      } else {
        return data;
      }
    },

    ///NG变红
    showDateNG(val) {
      val = val + "";
      if (val.indexOf(this.valNG) !== -1 && this.valNG !== "") {
        return val.replace(
          this.valNG,
          '<font color="#FF0000">' + this.valNG + "</font>"
        );
      } else {
        return val;
      }
    },

    // 柱状图
    dranbacklass() {
      let barname = [];
      let bardata = [];
      // var bardata2 = [];

      for (let i = 0; i < this.bar.length; i++) {
        barname.push(this.bar[i].defect);
        bardata.push(this.bar[i].num);
      }
      // console.log("----------------------------", bardata);

      let my_qersy = this.$echarts.init(document.getElementById("my_qersy"));
      var option = {
        color: ["#3398DB"],
        title: {
          text: "Top 10缺陷数量统计",
          left: "left",
          textStyle: {
            fontSize: 14,
            fontWeight: 300,
            lineHeight: 56,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          // data: ['超出','未超出'],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: barname,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
            },
            show: true,
          },
        ],
        // dataZoom: [
        //   {
        //     type: "slider",
        //     show: true,
        //     start: 0,
        //     end: 100,
        //     handleSize: 8,
        //   },
        //   {
        //     type: "inside",
        //     start: 0,
        //     end: 100,
        //   },
        //   {
        //     type: "slider",
        //     show: true,
        //     yAxisIndex: 0,
        //     filterMode: "empty",
        //     width: 12,
        //     height: "70%",
        //     handleSize: 8,
        //     showDataShadow: false,
        //     left: "93%",
        //   },
        // ],
        series: [
          {
            name: "",
            type: "bar",
            data: bardata,
            barWidth: "10%",
            // formatter:"{b}\n{c}%",
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value > 0 && params.value < 1000) {
                    return "#0000FF";
                  } else if (params.value >= 1000 && params.value <= 3000000) {
                    return "#DC143C";
                  }
                },
                label: {
                  // position: "top",
                  position: "insideRight",
                  // formatter: "{b}\n{c}%",
                  show: true,
                },
              },
            },
          },
        ],
      };
      my_qersy.setOption(option);

      setTimeout(() => {
        window.onresize = function () {
          my_qersy.resize();
        };
      }, 200);
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.drawbackpage();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.drawbackpage();
    },
  },
};
</script>

<style  scoped>
.drackba_content {
  width: 100%;
  position: relative;
}
.dranckba_seche {
  width: 100%;
  box-shadow: 0px 0px 0px 2px gainsboro;
  /* margin-top:5px;  */
}
.dracka_midland_box {
  width: 100%;
  /* border: 1px solid #000; */
  margin-top: 20px;
  /* background: #ffffff; */
  display: flex;
  justify-content: space-between;
}

.dracka_midnd_left {
  width: 100%;
  /* border:1px solid #000; */
}
.dracka_midnd_right {
  width: 25%;
  border: 1px solid red;
}
.dranckba_img {
  width: 100%;
  background: #ffffff;
  /* height: 210px; */
  /* margin-top: 10px; */
  display: flex;
  justify-content: space-around;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
  /* position: relative; */
}
.dranckba_table {
  width: 100%;
  background: #ffffff;
  margin-top: 20px;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
  /* display: flex;
  justify-content: space-between; */
}

#my_qersy {
  width: 100%;
  height: 300px;
  /* margin-top: 10px; */
  background: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
}
.dranckba_id_left {
  width: 70%;
  overflow: auto;
  display: flex;
  justify-content: space-around;
  margin-left: 100px;
}
.dranckba_right {
  width: 100%;
  border: 1px solid blue;
}

.dranck_left_a {
  width: 55%;
}
.dranckba_title_item {
  width: 30px;
  height: 20px;
  margin-left: 1px;
}
.dranckba_right_img {
  width: 100%;
  height: 500px;
}
.dranck_left_two {
  width: 55%;
}
.dranckba_title_p {
  margin-right: 95px;
}
.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  background: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-between; */
}

.tabale_serch_top {
  width: 100%;
  /* border: 1px solid #000; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tabale_serch_bom {
  width: 100%;
  /* border: 1px solid red; */
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: space-between;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}
.el-select {
  height: 10px;
  margin-left: -6px;
}
.product {
  width: 120px;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 20%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}

.dranckba_title {
  width: 100%;
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  background: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
}

.dranckba_right_title {
  /* text-align: center; */
  margin-top: 5px;
  font-size: 14px;
  margin-bottom: 20px;
}

.dranckba_item {
  width: 80px;
  /* border:1px solid #000;  */
  margin-right: 40px;
}
.dranckba_item div {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  margin-top: 4px;
}
.dranckba_item_one {
  width: 10px;
  height: 10px;
  border: 1px solid #ffb6c1;
  background: #ffb6c1;
}
.dranckba_item_two {
  width: 10px;
  height: 10px;
  border: 1px solid #eb7565;
  background: #dc143c;
}
.dranckba_item_ser {
  width: 10px;
  height: 10px;
  border: 1px solid #dc143c;
  background: #dc143c;
  margin-left: 2px;
}
.btn_dow
{
  width:22%;
  display: flex;
  /* border:1px solid #000; */
  margin-left:-86px;
}
.and_table {
  margin-left: -75px;
}
.uplod_btn {
  margin-left:20px;
}
.table_serch_dow
{
  margin-left:20px;
}
#defend
{
  margin-left:-79px;
}

/* 搜索框沾满全屏 */
/* @media screen and (min-width:1530px) {
   #and_table
   {
     margin-left:1.3%;
   }
} */
@media screen and (min-width: 1920px) {
  .uplod_btn {
    margin-left: 22.8%;
  }
  .and_table {
    margin-left:-60px;
  }
  #defend{
    margin-left:-48px;
  }
  .btn_dow{
    width:22%;
    display: flex;
    /* border:1px solid #000; */
    margin-left:-136px; 
  }
  .dracka_midland_box {
    margin-top: 40px;
  }
  .dranckba_title {
    margin-top: 40px;
  }
  .dranckba_table {
    margin-top: 40px;
  }
  .hader_top_right {
    width: 80%;
    margin-left: 3%;
  }
  .table_serch_dow{
    margin-right:-83px;
  }
}
</style>
